<template>
  <div
    class="step-item widget-view"
    :class="{
      active: selectWidget.key == element.key,
      is_req: element.options.required,
    }"
    @click.stop="handleSelectWidget(index)"
  >
    <div class="drag-l">
      <div
        v-if="selectWidget.key == element.key"
        class="drag-btn _fc-drag-btn"
        style="cursor: move"
      >
        <i class="el-icon-rank drag-widget" />
      </div>
    </div>
    <div class="drag-r">
      <div
        v-if="selectWidget.key == element.key"
        class="drag-btn drag-btn-danger"
        @click.stop="handleWidgetDelete(index)"
      >
        <i class="el-icon-delete" />
      </div>
    </div>
    <div class="el-divider el-divider--vertical">
      <!---->
    </div>
    <i class="el-icon-caret-bottom" />
    <slot name="default">
      <div class="step">
        <span class="label">{{ element.nodeName }}</span>
      </div>
    </slot>
  </div>
</template>

<script>
export default {
  name: 'StepItemEdit',
  // eslint-disable-next-line vue/require-prop-types
  props: ['element', 'select', 'index', 'data'],
  data() {
    return {
      selectWidget: this.select
    }
  },
  watch: {
    select(val) {
      this.selectWidget = val
    },
    selectWidget: {
      handler(val) {
        this.$emit('update:select', val)
      },
      deep: true
    }
  },
  methods: {
    handleSelectWidget(index) {
      this.selectWidget = this.data.list[index]
    },
    handleWidgetDelete(index) {
      this.$nextTick(() => {
        this.data.list.splice(index, 1)
        const nodeCodes = this.data.list.map((e) => e.nodeCode)
        const list = this.$parent.$parent.$parent.$parent.menuList[0].templateNodeList.map((e) => {
          e.fixed = nodeCodes.includes(e.nodeCode)
          return e
        })
        this.$parent.$parent.$parent.$parent.menuList[0].templateNodeList = list
      })
    }
  }
}
</script>

<style lang="scss">
$primary-color: #409eff;
$primary-background-color: #ecf5ff;
.step-item {
  position: relative;
  box-sizing: border-box;
  overflow: hidden;
  word-wrap: break-word;
  word-break: break-all;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  width: 100%;
  min-height: 80px;
}

.step-item .step-item {
  margin: 5px;
}

.step-item.active > div > .drag-btn {
  display: flex;
  justify-content: center;
  align-items: center;
}

.step-item .drag-btn {
  display: none;
}
.step {
  background-color: #fff;
  display: flex;
  align-items: center;
  position: relative;
  span.label {
    background-color: #fff;
  }
}
.drag-r {
  position: absolute;
  right: 75px;
  top: 11px;
  z-index: 999;
}

.drag-l {
  position: absolute;
  left: 75px;
  top: 11px;
  z-index: 999;
}

.drag-btn {
  height: 18px;
  width: 18px;
  color: #fff;
  background-color: #2e73ff;
  text-align: center;
  line-height: 20px;
  padding-bottom: 1px;
  float: left;
  cursor: pointer;
  justify-content: center;
}

.drag-btn + .drag-btn {
  margin-left: 2px;
}

.drag-btn-danger {
  background-color: #ff2e2e;
}

.drag-btn i {
  font-size: 13px;
}
.widget-view {
  // padding-bottom: 18px;
  // position: relative;
  // border: 1px dashed rgba(170, 170, 170, 0.7);
  // background-color: rgba(236, 245, 255, 0.3);
  // margin: 2px;

  .el-form-item__content {
    position: unset;
  }

  &.is_req {
    .el-form-item__label::before {
      content: '*';
      color: #f56c6c;
      margin-right: 4px;
    }
  }

  .widget-view-description {
    height: 15px;
    line-height: 15px;
    font-size: 13px;
    margin-top: 6px;
    color: #909399;
  }

  .widget-view-action {
    position: absolute;
    right: 0;
    bottom: 0;
    height: 28px;
    line-height: 28px;
    background: $primary-color;
    z-index: 9;

    i {
      font-size: 14px;
      color: #fff;
      margin: 0 5px;
      cursor: pointer;
    }
  }

  .widget-view-drag {
    position: absolute;
    left: -2px;
    top: -2px;
    bottom: -18px;
    height: 28px;
    line-height: 28px;
    background: $primary-color;
    z-index: 9;
    // display: none;

    i {
      font-size: 14px;
      color: #fff;
      margin: 0 5px;
      cursor: move;
    }
  }

  &:after {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    display: block;
  }

  &:hover {
    outline-offset: 0px;

    &.active {
      outline-offset: 0;
    }

    .widget-view-drag {
      display: block;
    }
  }

  &.ghost {
    background: #f56c6c;
    border: 2px solid #f56c6c;
    outline-width: 0;
    height: 3px;
    box-sizing: border-box;
    content: '';
    overflow: hidden;
    padding: 0;
  }
  .step {
    width: 148px;
    height: 40px;
    line-height: 40px;
    background-color: #ffffff;
    border: 1px solid;
    border-color: #e9ecf3;
    border-radius: 50px;
    text-align: center;
    display: inline-block;
  }
  .el-divider--vertical {
    height: 100%;
    position: absolute;
  }
  .el-icon-caret-bottom {
    position: absolute;
    bottom: -5px;
    font-size: 20px;
  }
}
</style>
